<template>
  <div class="api-usage-example">
    <h2>完整API使用示例</h2>
    
    <!-- 认证示例 -->
    <div class="section">
      <h3>认证功能</h3>
      <van-button @click="testAuth" :loading="authLoading">测试认证</van-button>
      <div v-if="currentUser" class="result">
        <p>当前用户: {{ currentUser.username }}</p>
      </div>
    </div>

    <!-- 训练功能示例 -->
    <div class="section">
      <h3>训练功能</h3>
      <van-button @click="testTraining" :loading="trainingLoading">测试训练功能</van-button>
      <div v-if="characters.length > 0" class="result">
        <p>AI角色数量: {{ characters.length }}</p>
        <p>训练场景数量: {{ scenarios.length }}</p>
      </div>
    </div>

    <!-- 每日挑战示例 -->
    <div class="section">
      <h3>每日挑战</h3>
      <van-button @click="testDailyChallenge" :loading="challengeLoading">获取今日挑战</van-button>
      <div v-if="todayChallenge" class="result">
        <p>今日挑战: {{ todayChallenge.title }}</p>
        <p>奖励积分: {{ todayChallenge.reward_points }}</p>
      </div>
    </div>

    <!-- 社区功能示例 -->
    <div class="section">
      <h3>社区功能</h3>
      <van-button @click="testCommunity" :loading="communityLoading">测试社区功能</van-button>
      <div v-if="communityShares.length > 0" class="result">
        <p>社区分享数量: {{ communityShares.length }}</p>
      </div>
    </div>

    <!-- 成就系统示例 -->
    <div class="section">
      <h3>成就系统</h3>
      <van-button @click="testAchievements" :loading="achievementLoading">测试成就系统</van-button>
      <div v-if="achievements.length > 0" class="result">
        <p>可获得成就数量: {{ achievements.length }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { showToast } from 'vant'
import {
  authApi,
  trainingApi,
  dailyChallengeApi,
  communityApi,
  achievementApi,
  type User,
  type AiCharacter,
  type TrainingScenario,
  type DailyChallenge,
  type CommunityShare,
  type Achievement
} from '@/api'

// 响应式数据
const authLoading = ref(false)
const trainingLoading = ref(false)
const challengeLoading = ref(false)
const communityLoading = ref(false)
const achievementLoading = ref(false)

const currentUser = ref<User | null>(null)
const characters = ref<AiCharacter[]>([])
const scenarios = ref<TrainingScenario[]>([])
const todayChallenge = ref<DailyChallenge | null>(null)
const communityShares = ref<CommunityShare[]>([])
const achievements = ref<Achievement[]>([])

// 测试认证功能
const testAuth = async () => {
  try {
    authLoading.value = true
    const response = await authApi.getCurrentUser()
    currentUser.value = response.data
    showToast('获取用户信息成功')
  } catch (error) {
    console.error('认证测试失败:', error)
    showToast('请先登录')
  } finally {
    authLoading.value = false
  }
}

// 测试训练功能
const testTraining = async () => {
  try {
    trainingLoading.value = true
    
    // 获取AI角色列表
    const charactersResponse = await trainingApi.getCharacters()
    characters.value = charactersResponse.data
    
    // 获取训练场景列表
    const scenariosResponse = await trainingApi.getScenarios()
    scenarios.value = scenariosResponse.data
    
    showToast('训练数据加载成功')
  } catch (error) {
    console.error('训练功能测试失败:', error)
  } finally {
    trainingLoading.value = false
  }
}

// 测试每日挑战
const testDailyChallenge = async () => {
  try {
    challengeLoading.value = true
    const response = await dailyChallengeApi.getTodayChallenge()
    todayChallenge.value = response.data
    showToast('获取今日挑战成功')
  } catch (error) {
    console.error('每日挑战测试失败:', error)
  } finally {
    challengeLoading.value = false
  }
}

// 测试社区功能
const testCommunity = async () => {
  try {
    communityLoading.value = true
    const response = await communityApi.getShares()
    communityShares.value = response.data.data
    showToast('获取社区分享成功')
  } catch (error) {
    console.error('社区功能测试失败:', error)
  } finally {
    communityLoading.value = false
  }
}

// 测试成就系统
const testAchievements = async () => {
  try {
    achievementLoading.value = true
    const response = await achievementApi.getAchievements()
    achievements.value = response.data
    showToast('获取成就列表成功')
  } catch (error) {
    console.error('成就系统测试失败:', error)
  } finally {
    achievementLoading.value = false
  }
}
</script>

<style scoped>
.api-usage-example {
  padding: 16px;
}

.section {
  margin-bottom: 24px;
  padding: 16px;
  background: #f7f8fa;
  border-radius: 8px;
}

.section h3 {
  margin: 0 0 16px 0;
  color: #323233;
}

.result {
  margin-top: 12px;
  padding: 12px;
  background: #fff;
  border-radius: 4px;
  border-left: 4px solid #1989fa;
}

.result p {
  margin: 4px 0;
  color: #646566;
}
</style>